<template>
  <div class="subjects-container">
    <el-card shadow="never">
      <!-- 搜索 -->
      <div class="header">
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-form-item label="学科名称" prop="subjectName">
              <el-input
                v-model.trim="requestParameters.subjectName"
                style="width: 180px"
                class="filter-item"
              ></el-input>
              <el-button
                style="margin-left: 15px"
                class="filter-item"
                size="small"
                @click="clearForm"
              >
                {{ $t('table.clearSearch') }}
              </el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="handleFilter"
                >{{ $t('table.search') }}</el-button
              >
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="handleCreate"
                type="success"
                icon="el-icon-edit"
                >{{ $t('table.addSubjects') }}</el-button
              >
            </el-form-item>
          </div>
        </el-form>
        <el-alert
          :inline="true"
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表单 -->
        <el-table
          :data="items"
          v-loading="listLoading"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            prop="subjectName"
            type="index"
          ></el-table-column>
          <el-table-column
            label="学科名称"
            prop="subjectName"
          ></el-table-column>
          <el-table-column label="创建者" prop="username"></el-table-column>
          <el-table-column align="center" :label="$t('table.operationDate')">
            <template #default="{ row }">
              <span>{{ row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay">
            <template #default="{ row }">
              <span>{{ row.isFrontDisplay == 0 ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="二级目录"
            prop="twoLevelDirectory"
          ></el-table-column>
          <el-table-column label="标签" prop="tags"></el-table-column>
          <el-table-column label="题目数量" prop="totals"></el-table-column>
          <el-table-column width="250" label="操作">
            <template #default="{ row }">
              <el-button
                @click="
                  $router.push({
                    path: 'directorys',
                    query: { id: row.id, name: row.subjectName }
                  })
                "
                type="text"
                >学科分类</el-button
              >
              <el-button
                @click="
                  $router.push({
                    path: 'tags',
                    query: { id: row.id, name: row.subjectName }
                  })
                "
                type="text"
                >学科标签</el-button
              >
              <el-button type="text" @click="clickEdit(row)">修改</el-button>
              <el-button type="text" @click="clickDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
      </div>
      <el-dialog
        :title="showTitle"
        @closed="handleClose"
        :visible.sync="adddialogVisible"
        width="30%"
      >
        <el-form
          :model="subForm"
          :rules="subrules"
          ref="subForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="subForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item prop="isFrontDisplay" label="是否显示">
            <el-switch
              v-model="subForm.isFrontDisplay"
              active-color="#13ce66"
              active-value="0"
              inactive-value="1"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="clickCancle">取消</el-button>
            <el-button type="primary" @click="clickSubmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects'
// import AddSub from '../components/add-sub.vue'
import PageTool from '../components/PageTool.vue'
export default {
  name: 'subjects',
  components: { PageTool },
  data () {
    return {
      listLoading: true,
      subList: [],
      alertText: '',
      total: null,
      adddialogVisible: false,
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectName: this.subjectName
      },
      subForm: {
        isFrontDisplay: '0',
        subjectName: ''
      },
      subrules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        isFrontDisplay: [{ required: true, trigger: 'change' }]
      },
      // subjectsDetialList: {
      //   counts: '',
      //   pagesize: '',
      //   page: '',
      //   items: []
      // },
      title: '',
      items: []
    }
  },
  created () {
    this.getList()
  },
  computed: {
    showTitle () {
      return this.subForm.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 清空搜索框
    clearForm () {
      this.$refs.requestParameters.resetFields()
      // console.log('1')
    },
    // 搜索
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 新增学科
    handleCreate () {
      this.clearForm()
      this.adddialogVisible = true
    },
    // 获取简单列表
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // console.log(res)
      this.subList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
      this.subjectsDetialList = res
      this.items = res.items
      // console.log(res)
      // console.log(res, 888)

      // console.log(this.subjectsDetialList.items)
    },
    handleClose () {
      if (this.$refs.subForm) {
        this.$refs.subForm.resetFields()
      }
      this.adddialogVisible = false
      this.subForm = { isFrontDisplay: '0', subjectName: '' }
    },
    async clickSubmit () {
      // console.log(this.subForm)
      this.$refs.subForm.validate(async (valid) => {
        if (!valid) return
        if (this.subForm.id) {
          await update(this.subForm)
          this.$message.success('修改学科成功')
        } else {
          await add(this.subForm)
          this.$message.success('添加学科成功')
        }
        this.handleClose()
        this.getList()
      })

      // console.log(this.subForm)
    },
    clickCancle () {
      this.handleClose()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.clearForm()
      this.getList()
    },
    // 修改学科
    async clickEdit (row) {
      // console.log(row)
      // const { data } = await detail({ id: dep.id })
      // console.log('9')
      // console.log({ id: dep.id })
      // console.log(data)
      this.clearForm()
      this.subForm = { ...row }
      this.adddialogVisible = true
      // console.log(this.subForm)
    },
    // 数据排序
    changesort (a, b) {
      const oldTime = new Date(a.date).getTime() / 1000
      const newime = new Date(b.date).getTime() / 1000
      if (oldTime - newime > 0) {
        return true
      } else {
        return false
      }
    },
    // 删除学科
    clickDel (row) {
      this.$confirm('确定要删除该活动?', '温馨提示')
        .then(async () => {
          const data = await remove(row)
          console.log(data)
          if (this.subList.length === 1) {
            this.requestParameters.page--
          }
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(() => {
          // console.log('取消')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 10px; // text-align: right;
}
</style>
